<!DOCTYPE html>
<html>
<head>
    <title>自己随便改名都可以，会显示在标题</title>
    <style>
        body{
            background:rgba(0, 0, 0, 1.0);
            /*更改背景颜色*/
        }

        * {
            margin:0;
            padding:0;
        }

        video{
            opacity: 0.1;
            width: 50%;
            height: 20px;
            transition: 0.5s;
            left: 25%;
            bottom: 20px;
            z-index: 100;
            position: fixed;
        }

        /*最外层容器样式*/
        .wrap {
            width: 300px;
            height: 300px;
            margin: 175px auto;
            position: relative;
            border-radius:50%;
        }

        /*包裹所有容器样式*/
        .cube {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            animation: rotate linear 20s infinite;
        }

        @-webkit-keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(720deg) rotateY(360deg);
            }
        }

        .cube div {
            position: absolute;
            width: 300px;
            height: 300px;
            opacity: 0.8;
            transition: all .4s;
        }

        /*定义所有图片样式*/
        .pic {
            width: 300px;
            height: 300px;
        }

        .cube .out_front {
            transform: rotateY(0deg) translateZ(150px);
        }

        .cube .out_back {
            transform: translateZ(-150px) rotateY(180deg);
        }

        .cube .out_left {
            transform: rotateY(-90deg) translateZ(150px);
        }

        .cube .out_right {
            transform: rotateY(90deg) translateZ(150px);
        }

        .cube .out_top {
            transform: rotateX(90deg) translateZ(150px);
        }

        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(150px);
        }

        /*定义小正方体样式*/
        .cube span {
            display: block;
            width: 150px;
            height: 150px;
            position: absolute;
            top: 75px;
            left: 75px;
        }

        .cube .in_pic {
            width: 150px;
            height: 150px;
        }

        .cube .in_front {
            transform: rotateY(0deg) translateZ(75px);
        }

        .cube .in_back {
            transform: translateZ(-75px) rotateY(180deg);
        }

        .cube .in_left {
            transform: rotateY(-90deg) translateZ(75px);
        }

        .cube .in_right {
            transform: rotateY(90deg) translateZ(75px);
        }

        .cube .in_top {
            transform: rotateX(90deg) translateZ(75px);
        }

        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(75px);
        }

        /*鼠标移入后样式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(250px);
        }

        .cube:hover .out_back {
            transform: translateZ(-250px) rotateY(180deg);
        }

        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(250px);
        }

        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(250px);
        }

        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(250px);
        }

        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(250px);
        }

        /*鼠标移入完全显示播放器*/
        video:hover{
            opacity: 1;
        }
    </style>
</head>
<body>
<!-- 外层最大容器 -->
<div class="wrap">
    <!--包裹所有元素的容器-->
    <div class="cube">
        <!--前面图片 -->
        <div class="out_front">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661836191&t=cd0358d2e92afc852d12b2ec95394323" class="pic" />
        </div>
        <!--后面图片 -->
        <div class="out_back">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661836191&t=cd0358d2e92afc852d12b2ec95394323" class="pic" />
        </div>
        <!--左面图片 -->
        <div class="out_left">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661836191&t=cd0358d2e92afc852d12b2ec95394323" class="pic" />
        </div>
        <!--右面图片 -->
        <div class="out_right">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661836191&t=cd0358d2e92afc852d12b2ec95394323" class="pic" />
        </div>
        <!--上面图片 -->
        <div class="out_top">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661836191&t=cd0358d2e92afc852d12b2ec95394323" class="pic" />
        </div>
        <!--下面图片 -->
        <div class="out_bottom">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661836191&t=cd0358d2e92afc852d12b2ec95394323" class="pic" />
        </div>

        <!--小正方体 -->
        <span class="in_front">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661836191&t=cd0358d2e92afc852d12b2ec95394323" class="in_pic" />
            </span>
        <span class="in_back">
                 <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661836191&t=cd0358d2e92afc852d12b2ec95394323" class="in_pic" />
            </span>
        <span class="in_left">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661836191&t=cd0358d2e92afc852d12b2ec95394323" class="in_pic" />
            </span>
        <span class="in_right">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661836191&t=cd0358d2e92afc852d12b2ec95394323" class="in_pic" />
            </span>
        <span class="in_top">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661836191&t=cd0358d2e92afc852d12b2ec95394323" class="in_pic" />
            </span>
        <span class="in_bottom">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661836191&t=cd0358d2e92afc852d12b2ec95394323" class="in_pic" />
            </span>
    </div>
</div>
<video controls="controls">
    <source src="http://music.163.com/song/media/outer/url?id=28638436.mp3">
</video>
</body>
</html>